@property --p {
  syntax: '<number>';
  initial-value: 0;
  inherits: true;
}

@property --q {
  syntax: '<number>';
  initial-value: 0;
  inherits: true;
}

.spinner {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  z-index: 5;
  display: grid;
  transform: rotate(calc(var(--p) * 1turn));
  background: conic-gradient(
    transparent calc(var(--p) * 100%),
    var(--color-gradient-purple) calc(var(--p) * 100%),
    var(--color-gradient-blue) calc(var(--q) * 100%),
    transparent calc(var(--q) * 100%)
  );
  --mask-spinner: radial-gradient(
    closest-side,
    transparent calc(100% - 0.5rem),
    #000 calc(100% - 0.5rem + 1px)
  );
  -webkit-mask: var(--mask-spinner);
  mask: var(--mask-spinner);
  animation:
    p_anim 2s infinite cubic-bezier(0.32, 0, 0.68, 0),
    q_anim 2s infinite cubic-bezier(0.32, 1, 0.68, 1);
  color: transparent;
}

.spinner::before,
.spinner::after {
  border-radius: 50%;
  place-self: center;
  transform: rotate(calc(var(--a, var(--p)) * 1turn)) translateY(-1rem);
}

.spinner::before {
  background: var(--color-gradient-purple);
}

.spinner::after {
  background: var(--color-gradient-blue);
  --a: var(--q);
}

@keyframes p_anim {
  to {
    --p: 1;
  }
}

@keyframes q_anim {
  to {
    --q: 1;
  }
}
